<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>LayuiCMSluyun-登录2</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="../..favicon.ico" type="image/x-icon" rel="shortcut icon" />

    <link href="../../plugins/waves/waves.min.css" type="text/css" rel="stylesheet" />
    <link href="../../plugins/layui/css/layui.css" type="text/css" rel="stylesheet" />
    <link href="login2.css" type="text/css" rel="stylesheet" />
    <link href="../../plugins/layui-icon-extend/iconfont.css" type="text/css" rel="stylesheet" />

    <style>
        .layui-layer-tips .layui-layer-content {
            background-color: #4390ff !important;
        }

        .layui-layer-tips i.layui-layer-TipsB,
        .layui-layer-tips i.layui-layer-TipsT {
            border-right-color: #4390ff !important;
        }
    </style>
</head>

<body>
    <script src="../../plugins/waves/waves.min.js"></script>
    <script src="../../plugins/jquery.min.js"></script>
    <script src="../../plugins/layui/layui.js"></script>

    <div class="login-background">
        <div class="login-page">

            <div class="main-login-contain">
                <div class="login-overlay-form login-form">

                    <div class="main-login-contain">
                        <form id="form-validation" class="layui-form">

                            <h4>登录</h4>

                            <p>
                                基于layui开发的一套后台框架。致力于简洁代码和拿来即用。
                            </p>

                            <div class="form-group">
                                <input type="text" required="required" name="AccountNumber" lay-verify="AccountNumber"
                                    autocomplete="off" lay-verType="tips">
                                <label class="control-label">输入账号</label><i class="bar"></i>
                            </div>

                            <div class="form-group">
                                <input type="password" required="required" name="Password" lay-verify="Password"
                                    autocomplete="off" lay-verType="tips">
                                <label class="control-label">输入密码</label><i class="bar"></i>
                            </div>

                            <div class="goto-login">
                                <div class="forgot-password-login">
                                    <a href="javascript:void(0)">
                                        <i class="icon icon_lock"></i> 忘记密码？
                                    </a>
                                </div>
                                <button type="submit"
                                    class="layui-btn layui-btn-normal btn-login float-button-light waves-effect waves-button waves-float waves-light"
                                    lay-submit="" lay-filter="user-login-submit" id="submitBtn">
                                    登入
                                </button>
                            </div>

                            <span class="media-text">其他登录方式</span>

                            <div class="social-media-section">
                                <a class="social-hexagon">
                                    <i class="layuiCMSluyun-icon layui-icon-extend-qq1"></i>
                                </a>
                                <a class="social-hexagon">
                                    <i class="layuiCMSluyun-icon layui-icon-extend-weixin"></i>
                                </a>
                                <a class="social-hexagon">
                                    <i class="layuiCMSluyun-icon layui-icon-extend-xinlang"></i>
                                </a>
                            </div>

                        </form>
                    </div>

                </div>
            </div>

        </div>

        <div class="footer-copyright">
            <p>
                <a href="https://gitee.com/cluyun" target="_blank">&copy; 2019 碌云</a>
            </p>
        </div>

    </div>



    <script>
        $(function () {

            layui.use(["form", "layer"], function () {
                var form = layui.form;
                var layer = layui.layer;


                //自定义验证规则
                form.verify({
                    AccountNumber: function (value) {
                        if (value.length < 1) {
                            return '请输入账号';
                        }
                    }
                    , Password: function (value) {
                        if (value.length < 1) {
                            return '请输入密码';
                        }
                    }
                });

                //提交
                form.on('submit(user-login-submit)', function (obj) {
                    var data = obj.field;
                    var user = {
                        userAcc: data.AccountNumber,
                        passwd: data.Password
                    }

                    $("#submitBtn").addClass("layui-btn-disabled").prop("disabled", true).text("登录中…");


                    if (user.userAcc === 'admin' && user.passwd === '123') {
                        setTimeout("top.location.replace('/index.html')", "1000");
                    } else {
                        layer.msg('账号或密码错误', { anim: 10, icon: 0 });
                        $("#submitBtn").removeClass("layui-btn-disabled").prop("disabled", false).text("登入");
                    }


                    return false;
                });



            });


            if (typeof Waves !== 'undefined') {
                Waves.attach('.float-button-light', ['waves-button', 'waves-float', 'waves-light']);
                Waves.init();
            }

            $(document).on("keyup", "input", function (event) {
                if (event.keyCode == 13) {
                    $('#submitBtn').click();
                }
            });

            $(window).resize(function () {
                try {
                    //解决移动端输入法弹出收回提示位置错误问题
                    layui.layer.closeAll('tips'); //关闭所有的tips层 
                } catch (e) { }
            });

        });
    </script>
</body>

</html>